<template>
  <div>
    <div class="search-container">
      <el-row>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">Redis版本 </div>
            <div>5.0.1 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">运行模式 </div>
            <div>单机</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">端口 </div>
            <div>8000 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">客户端数 </div>
            <div>1 </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">运行时间（天） </div>
            <div>5 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">使用内存 </div>
            <div>100M </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">使用CPU </div>
            <div>0.7</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">内存配置 </div>
            <div>256M </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px; margin-bottom: 20px;">
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">AOF是否开启 </div>
            <div>否 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">RDB是否成功 </div>
            <div>OK </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">Key数量 </div>
            <div>22 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">网络入口\出口 </div>
            <div>0.00kps/0.00kps </div>
          </div>
        </el-col>

      </el-row>
    </div>

    <div class="search-container">
      <el-row style="margin-top: 10px;margin-bottom: 20px;">
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="card-header">
              <p class="card-header-title">命令统计</p>
              <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
            </div>
            <v-chart class="chart" :option="barOptions" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="card-header">
              <p class="card-header-title">磁盘使用情况</p>
              <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
            </div>
            <v-chart class="chart" :option="pieoption" />

          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,

} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { barOptions, dashOpt1, dashOpt2, mapOptions, lineOptions } from './chart/options';
import chinaMap from '@/utils/china';
import { GaugeChart } from 'echarts/charts';

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  LineChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MapChart,
  GaugeChart
]);
registerMap('china', chinaMap);

const barOptions = ref({
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
});

const pieoption = ref({
  series: [
    {
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 40,
        fontSize: 20
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} km/h',
        color: 'inherit'
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
});
</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}

.chart {
  width: 100%;
  height: 600px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}
</style>